<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <breadcrumb :breadcrumbConfig=breadcrumbConfig></breadcrumb>
    <!--    <breadcrumb></breadcrumb>-->
    <!-- 面包屑导航 -->
    <div class="content">
      <h2>物流订单</h2>
      <h3>数据筛选</h3>
      <form-filed class="search-form" :formconfig="searchFormConfig.formconfig" :formData="searchFormConfig.formData"
                  @formDataval="dialogClick" ref="formAttr"/>
    </div>
    <div class="content">
      <h3>列表数据</h3>
      <div class="but-list">
        <div class="left">
          <el-button type="primary" size="small" plain>全1部</el-button>
          <el-button type="primary" size="small" plain>待备货（11）</el-button>
          <el-button type="primary" size="small" plain>已备货（14）</el-button>
          <el-button type="primary" size="small" plain>待发货（105）</el-button>
          <el-button type="primary" size="small" plain>已发货</el-button>
          <el-button type="primary" size="small" plain>售后件</el-button>
        </div>
        <div class="right">
          <el-button type="primary" size="small">导出记录</el-button>
          <el-button type="primary" size="small">导出发货</el-button>
        </div>
      </div>
      <lb-table
          :column="columns"
          :data="list"
          pagination
          :total="page.totalNum"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 20, 30, 50]"
          :current-page.sync="page.currentPage"
          :page-size="page.pageSize"
          @size-change="handleSizeChange"
          @p-current-change="handleCurrentChange"
      >
      </lb-table>
    </div>
    <!--========================== el-dialog =================================-->
<!--      <el-dialog title="收货地址" :visible.sync="dialogTableVisible">-->
<!--        <el-table :data="gridData">-->
<!--          <el-table-column property="date" label="日期" width="150"></el-table-column>-->
<!--          <el-table-column property="name" label="姓名" width="200"></el-table-column>-->
<!--          <el-table-column property="address" label="地址"></el-table-column>-->
<!--        </el-table>-->
<!--      </el-dialog>-->
    <!--=========================== el-dialog end================================-->
  </div>

</template>

<script>
import formFiled from '@/components/form/index'
import breadcrumb from '@/components/breadcrumb'
import LbTable from '../../../components/lb-table/lb-table'

import mixinsCommon from './../mixins/common.js'

export default {
  mixins: [mixinsCommon],
  components: {
    formFiled,
    breadcrumb,
    LbTable
  },
  data () {
    return {
      currentState: 1,
      logisticsStatus: {
        all: 1, // 全部
        stayStockUp: 2, // 待备货
        stockUp: 3, // 已备货
        stayDeliverGoods: 4, // 待发货
        deliverGoods: 5, // 已发货
        afterSale: 6 // 售后件
      },
      dialog: { visible: false, title: '编辑', type: '' },
      page: { pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1, status: '' },
      breadcrumbConfig: {
        list: [
          {
            title: '订单管理',
            type: '#ff0000',
            path: '/'
          },
          {
            title: '物流订单',
            type: '1',
            path: '/'
          }
        ]
      },
      searchFormConfig: {
        formconfig: {
          labeWidth: 82, // 表单宽度
          itemList: [// 表单的list
            { type: 'input', prop: 'inputa', placeholder: '请输入内容', label: '订单编号', size: 'small' },
            { type: 'input', prop: 'inputb', placeholder: '请输入内容', label: '收货人信息', size: 'small' },
            {
              type: 'select', prop: 'selectPropb', placeholder: '请选择内容', label: '状态', size: 'small',
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            },
            {
              type: 'select', prop: 'selectPropd', placeholder: '请选择内容', label: '支付方式', size: 'small',
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            },
            {
              type: 'select',
              prop: 'selectPropa',
              placeholder: '请选择内容',
              label: '平台',
              size: 'small',
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            },
            {
              type: 'select', prop: 'selectPropba', placeholder: '请选择内容', label: '店铺', size: 'small',
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            },
            {
              type: 'select', prop: 'selectPropc', placeholder: '请选择内容', label: '跟进客服', size: 'small',
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            },
            { type: 'input', prop: 'inputa', placeholder: '请输入内容', label: '售后编号', size: 'small' },
            {
              type: 'select', prop: 'selectProph', placeholder: '请选择内容', label: '售后状态', size: 'small',
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            }, {
              type: 'select', prop: 'selectProph', placeholder: '请选择内容', label: '售后原因', size: 'small',
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            },
            { type: 'daterange', prop: 'daterange', placeholder: '请选择日期', label: '发货时间', size: 'small' },
            { type: 'daterange', prop: 'daterange2', placeholder: '请选择日期', label: '下单时间', size: 'small' }
          ],
          btnarry: [// 表单按钮
            { name: '查询', click: 'add', type: 'primary', plain: true, size: 'small' },
            { name: '重置', click: 'clrear', type: 'primary', plain: true, size: 'small' }
          ]
        },
        formData: { // 表单提交数据，
          checkbox: []// 注：如果类型是checkbox，必须foemData里边提前声明数组
        }
      },
      activeName: 'goods',
      list: [],
      columns: [
        {
          type: 'selection'
        }, {
          label: '订单编号',
          width: '120',
          prop: 'code'
        },
        {
          label: '下单时间',
          width: '200',
          prop: 'updatedTime'
        },
        {
          label: '商品名称',
          prop: 'name'
        },
        {
          label: '数量',
          prop: 'title'
        },
        {
          label: '平台',
          prop: 'typeId'
        },
        {
          label: '店铺',
          prop: 'title'
        },
        {
          label: '跟进客服',
          prop: 'specificationName'
        },
        {
          label: '支付金额',
          prop: 'specificationName'
        },
        {
          label: '收货人',
          prop: 'specificationName'
        },
        {
          label: '收货地址',
          width: '200',
          prop: 'specificationName'
        },
        {
          label: '售后类型',
          prop: 'quantityStock'
        },
        {
          label: '操作',
          width: '100',
          render: (h, scope) => {
            return (
              <div>
                <el-link type='primary' size='mini' type='primary'>售后记录</el-link>
              </div>
            )
          }
        }]
    }
  },
  created () {
    console.log('created')
    this.fetchData()
  },
  methods: {
    // 接受表单组件的数据
    dialogClick (val, state) {
      console.log(val, state)
      this.formFiledDataState = state
      // this.formFiledData = Object.assign(this.formFiledData, val)
      // console.log(this.formFiledData,'接受表单组件的数据');
    },
    // 显示  dialog
    showDialog (title, type, row) {
      // console.log(title, type, row)
      this.dialog.type = type
      this.currentRow = row
    },
    fetchData (type) {
      if (type == 'reset') {
        this.$refs['searchForm'].resetFields()
        this.page.pageNo = 1
        this.page.pageSize = 10
        this.page.currentPage = 1
      }
      let params = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        status: this.page.status
      }
      if (type == 'search') {
        this.page.currentPage = 1
        this.page.pageNo = 1
        params.pageNo = 1
        const searchForm = this.searchForm
        params = Object.assign(params, searchForm)
        params.categoryId = searchForm.categoryId[searchForm.categoryId.length - 1]
        // 去除字符串 前后 空格
        // for (const item in params) { if (typeof params[item] === 'string') { params[item] = params[item].trim() } }
      }
      this.$api.goodsPageList(params).then((res) => {
        if (res.code === 0) {
          this.list = res.data.list
          this.page.totalNum = res.data.totalNum
        } else {
          console.log('goodsPageList - 失败', type)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleCurrentChange (currentChange) {
      this.page.pageNo = currentChange
      this.fetchData()
    },
    handleSizeChange (sizeChange) {
      this.page.currentPage = 1
      this.page.pageSize = sizeChange
      this.fetchData()
    },
    onChangeLogisticsStatus () {

    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-button {border: none;}

.search-form {
  display: flex;
  flex-wrap: wrap;
  /deep/ .el-form-item {
    width: 100%;
    max-width: 350px;
    min-width: 300px;
    .el-form-item__content {
      .el-select, .el-date-editor {
        width: 100%;
      }
    }
  }
}
.but-list{
  margin-bottom: 20px;
  .left {
    float: left;
    /deep/ .el-button{
      width: 120px;
      height: 36px;
      background: #E3EDFF;
      border-radius: 4px;
      font-size: 16px;
    }
  }
  .right{
    float: right;
  }
}
</style>
